<template>
    <n-grid :cols="12" item-responsive responsive="screen" class=" my-10">
        <n-gi span="12 m:8 l:6" offset="0 m:2 l:3">
            <n-card>

                <n-page-header @back="handleBack">
                    <template #title>
                        {{ course.courseName }}
                    </template>

                    <template #footer>

                    </template>
                </n-page-header>
                <n-divider />
                <n-spin :show="chartShow">
                <n-grid :cols="3" item-responsive responsive="screen">
                    <n-gi>
                        <div style="width:100%;height:350px" ref="chapterGraph"></div>
                    </n-gi>
                    <n-gi>
                        <div style="width:100%;height:350px" ref="examGraph"></div>
                    </n-gi>
                    <n-gi>
                        <div style="width:100%;height:350px" ref="discussGraph"></div>
                    </n-gi>
                    <n-gi class="px-5">
                        <n-statistic label="观看媒体" :value="courseNumberCount.chapter.finish">
        
                            <template #suffix>
                                / {{courseNumberCount.chapter.total}}
                              </template>
                          </n-statistic>
                    </n-gi>
                    <n-gi class="px-5">
                        <n-statistic label="参加测验" :value="courseNumberCount.exam.finish">
                            <template #suffix>
                                / {{courseNumberCount.exam.total}}
                              </template>
                          </n-statistic>
                    </n-gi>
                    <n-gi class="px-5">
                        <n-statistic label="参与讨论" :value="courseNumberCount.discuss.finish">
                            <template #suffix>
                                / {{courseNumberCount.discuss.total}}
                              </template>
                          </n-statistic>
                    </n-gi>
                    <n-gi span="3">
                        <div class="my-5" style="width:100%;height:250px" ref="countExamDetailGraph"></div>
                    </n-gi>
                    <n-gi span="3">
                        <n-list >
                            <template #header>
                              未完成的媒体
                            </template>
                            <n-list-item v-for="el in unFinishMedia">
                              <n-thing :title="el.basicName">
                                <template #header-extra> 
                                    <n-button type="success" @click="goLearning">
                                        前往学习
                                    </n-button>
                                </template>
                                </n-thing>
                            </n-list-item>
                          </n-list>
                    </n-gi>
                </n-grid>
            </n-spin>
            </n-card>
        </n-gi>
    </n-grid>
</template>
<script lang="ts" setup>
import { getCourseName, getCourseCount } from '@/api/student/studentCourse';
import { NPageHeader } from 'naive-ui';
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import * as echarts from 'echarts';

const route = useRoute();
const router = useRouter();

const handleBack = () => {
    router.go(-1);
}
const params = reactive(
    {
        courseID: route.params.courseID
    }
);
const course = ref({
    SID: '',
    studentName: '',
    claseName: '',
    courseID: '',
    courseName: '',
    teacherName: '',
    studentNumber: ''
});
const chapterGraph = ref();
const examGraph = ref();
const discussGraph = ref();
const countExamDetailGraph = ref();

const courseNumberCount = ref(
    {
        chapter:{
            total:0,
            finish:0
        },
        exam:{
            total:0,
            finish:0
        },
        discuss:{
            total:0,
            finish:0
        }
    }
)

const unFinishMedia:any = ref([])

const chartShow = ref(false);
const goLearning=()=>{
    router.push({'name':'student_course_detail',params:{
        courseID: route.params.courseID
    }})
}

onMounted(async () => {
    chartShow.value = true;
    course.value = await getCourseName(params)
    let col = await getCourseCount(params);
    console.log(col)
    
    courseNumberCount.value.chapter.total =  col.mediaList.length;
    courseNumberCount.value.exam.total =  col.examList.length;
    courseNumberCount.value.discuss.total =  col.discussList.length;
    
    courseNumberCount.value.chapter.finish =  col.studentCount.studentMediaTotal;
    courseNumberCount.value.exam.finish =  col.studentCount.studentExamTotal;
    courseNumberCount.value.discuss.finish =  col.studentCount.studentDiscussTotal;

    let mediaChart = echarts.init(chapterGraph.value);
    let examChart = echarts.init(examGraph.value);
    let discussChart = echarts.init(discussGraph.value);
    let countExamDetailChart = echarts.init(countExamDetailGraph.value);
    //初始化图表

    chapterOption.value.series[0].data = [
        {
            value: col.studentCount.studentMediaTotalCredit,
            name: '已获得积分'
        }, {
            value: col.courseCount.mediaTotal - col.studentCount.studentMediaTotalCredit,
            name: '未获得积分'
        }
    ]
    mediaChart.setOption(chapterOption.value)
    //多媒体积分图标

    examOption.value.series[0].data = [
        {
            value: col.studentCount.studentExamTotalCredit,
            name: '已获得积分'
        }, {
            value: col.courseCount.examTotal - col.studentCount.studentExamTotalCredit,
            name: '未获得积分'
        }
    ]
    examChart.setOption(examOption.value)
    //测验积分图表

    discussOption.value.series[0].data = [
        {
            value: col.studentCount.studentDiscussTotalCredit,
            name: '已获得积分'
        }, {
            value: col.courseCount.discussTotal - col.studentCount.studentDiscussTotalCredit,
            name: '未获得积分'
        }
    ]
    discussChart.setOption(discussOption.value)

    countExamDetailOption.value.xAxis.data=[];
    countExamDetailOption.value.series[0].data = [];
    col.examList.forEach(element => {
        countExamDetailOption.value.xAxis.data.push(element.title);
        countExamDetailOption.value.series[0].data.push(element.studentCredit?element.studentCredit/element.examCredit:0)
    });
    countExamDetailChart.setOption(countExamDetailOption.value)

    unFinishMedia.value = []
    col.mediaList.forEach(element => {
        if(element.SID == null) unFinishMedia.value.push(element)
    });

    window.addEventListener("resize", (() => {
        setTimeout(() => { // 避免多图同时加载卡顿
            mediaChart.resize();
        }, 200);
        setTimeout(() => { // 避免多图同时加载卡顿
            examChart.resize();
        }, 200);
        setTimeout(() => { // 避免多图同时加载卡顿
            discussChart.resize();
        }, 200);
        setTimeout(() => { // 避免多图同时加载卡顿
            countExamDetailChart.resize();
        }, 200);
    }));
    chartShow.value = false;
});

const chapterOption = ref({
    title: {
        text: '媒体积分获取统计',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '8%',
        left: 'center'
    },
    color: ['#27ae60', '#e74c3c'],
    series: [
        {
            name: '媒体积分获取统计',
            type: 'pie',
            radius: ['60%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '20',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {
                    value: 0,
                    name: ''
                }
            ]
        }
    ]
});
const examOption = ref({
    title: {
        text: '测验积分获取统计',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '8%',
        left: 'center'
    },
    color: ['#27ae60', '#e74c3c'],
    series: [
        {
            name: '测验积分获取统计',
            type: 'pie',
            radius: ['60%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '20',
                    fontWeight: 'bold'
                }
            },
            data: [
                {
                    value: 0,
                    name: ''
                }
            ]
        }
    ]
});
const discussOption = ref({
    title: {
        text: '讨论积分获取统计',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '8%',
        left: 'center'
    },
    color: ['#27ae60', '#e74c3c'],
    series: [
        {
            name: '讨论积分获取统计',
            type: 'pie',
            radius: ['60%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '20',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {
                    value: 0,
                    name: ''
                }
            ]
        }
    ]
});
const countExamDetailOption = ref({
title: {
    text: '课堂小测分数百分比统计',
    left: 'center'
},
  xAxis: {
    type: 'category',
    data: ['']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [0],
      type: 'line'
    }
  ]
});


</script>